<template>
  <div class="advanced-form-demo">
    <div class="example-section">
      <h3 class="section-title">动态表单</h3>
      <p class="section-description">可动态添加和删除表单项的表单</p>

      <div class="demo-container">
        <div class="demo-wrapper">
          <a-form layout="vertical" class="demo-form">
            <div class="form-section">
              <div class="section-header">
                <h4>联系人信息</h4>
                <a-button type="dashed" @click="addContact" :icon="h(PlusOutlined)">
                  添加联系人
                </a-button>
              </div>
              <div v-for="(contact, index) in dynamicForm.contacts" :key="contact.key" class="dynamic-item">
                <a-row :gutter="16">
                  <a-col :span="8">
                    <a-form-item :label="`联系人${index + 1}姓名`">
                      <a-input v-model:value="contact.name" placeholder="请输入姓名" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item :label="`联系人${index + 1}电话`">
                      <a-input v-model:value="contact.phone" placeholder="请输入电话" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item :label="`联系人${index + 1}关系`">
                      <a-select v-model:value="contact.relation" placeholder="请选择关系">
                        <a-select-option value="family">家人</a-select-option>
                        <a-select-option value="friend">朋友</a-select-option>
                        <a-select-option value="colleague">同事</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                  <a-col :span="2">
                    <a-form-item label=" ">
                      <a-button
                        type="text"
                        danger
                        :icon="h(MinusCircleOutlined)"
                        @click="removeContact(index)"
                        :disabled="dynamicForm.contacts.length === 1"
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </div>
            </div>
          </a-form>
        </div>
        <div class="result-display">
          <div class="result-label">动态表单数据：</div>
          <div class="result-value">
            <pre>{{ JSON.stringify(dynamicForm, null, 2) }}</pre>
          </div>
        </div>
      </div>
    </div>

    <div class="example-section">
      <h3 class="section-title">步骤表单</h3>
      <p class="section-description">分步骤填写的表单</p>

      <div class="demo-container">
        <div class="demo-wrapper">
          <a-steps :current="stepForm.current" class="step-form-steps">
            <a-step title="基本信息" />
            <a-step title="详细信息" />
            <a-step title="确认提交" />
          </a-steps>

          <div class="step-content">
            <!-- 步骤1：基本信息 -->
            <div v-if="stepForm.current === 0" class="step-form">
              <a-form layout="vertical">
                <a-row :gutter="24">
                  <a-col :span="12">
                    <a-form-item label="公司名称">
                      <a-input v-model:value="stepForm.data.companyName" placeholder="请输入公司名称" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="公司类型">
                      <a-select v-model:value="stepForm.data.companyType" placeholder="请选择公司类型">
                        <a-select-option value="startup">初创公司</a-select-option>
                        <a-select-option value="enterprise">大型企业</a-select-option>
                        <a-select-option value="government">政府机构</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-form-item label="公司地址">
                  <a-input v-model:value="stepForm.data.address" placeholder="请输入公司地址" />
                </a-form-item>
              </a-form>
            </div>

            <!-- 步骤2：详细信息 -->
            <div v-if="stepForm.current === 1" class="step-form">
              <a-form layout="vertical">
                <a-row :gutter="24">
                  <a-col :span="12">
                    <a-form-item label="员工人数">
                      <a-select v-model:value="stepForm.data.employeeCount" placeholder="请选择员工人数">
                        <a-select-option value="1-10">1-10人</a-select-option>
                        <a-select-option value="11-50">11-50人</a-select-option>
                        <a-select-option value="51-200">51-200人</a-select-option>
                        <a-select-option value="200+">200人以上</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="成立时间">
                      <a-date-picker v-model:value="stepForm.data.foundedDate" placeholder="请选择成立时间" />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-form-item label="业务描述">
                  <a-textarea v-model:value="stepForm.data.businessDescription" placeholder="请描述公司主要业务" :rows="4" />
                </a-form-item>
              </a-form>
            </div>

            <!-- 步骤3：确认提交 -->
            <div v-if="stepForm.current === 2" class="step-form">
              <div class="confirm-content">
                <h4>请确认以下信息：</h4>
                <a-descriptions :column="2" bordered>
                  <a-descriptions-item label="公司名称">{{ stepForm.data.companyName || '-' }}</a-descriptions-item>
                  <a-descriptions-item label="公司类型">{{ getCompanyTypeText(stepForm.data.companyType) }}</a-descriptions-item>
                  <a-descriptions-item label="公司地址" :span="2">{{ stepForm.data.address || '-' }}</a-descriptions-item>
                  <a-descriptions-item label="员工人数">{{ stepForm.data.employeeCount || '-' }}</a-descriptions-item>
                  <a-descriptions-item label="成立时间">{{ stepForm.data.foundedDate?.format?.('YYYY-MM-DD') || '-' }}</a-descriptions-item>
                  <a-descriptions-item label="业务描述" :span="2">{{ stepForm.data.businessDescription || '-' }}</a-descriptions-item>
                </a-descriptions>
              </div>
            </div>
          </div>

          <div class="step-actions">
            <a-button v-if="stepForm.current > 0" @click="stepForm.current--">
              上一步
            </a-button>
            <a-button
              v-if="stepForm.current < 2"
              type="primary"
              @click="stepForm.current++"
            >
              下一步
            </a-button>
            <a-button
              v-if="stepForm.current === 2"
              type="primary"
              @click="handleStepSubmit"
            >
              提交
            </a-button>
          </div>
        </div>
        <div class="result-display">
          <div class="result-label">步骤表单数据：</div>
          <div class="result-value">
            <pre>{{ JSON.stringify({ current: stepForm.current, data: stepForm.data }, null, 2) }}</pre>
          </div>
        </div>
      </div>
    </div>

    <div class="example-section">
      <h3 class="section-title">组件代码示例</h3>
      <p class="section-description">高级表单组件的使用方法</p>

      <a-collapse>
        <a-collapse-panel key="1" header="动态表单">
          <pre class="code-block"><code>&lt;template&gt;
  &lt;a-form layout="vertical"&gt;
    &lt;div v-for="(item, index) in dynamicItems" :key="item.key"&gt;
      &lt;a-row :gutter="16"&gt;
        &lt;a-col :span="10"&gt;
          &lt;a-form-item :label="`项目${index + 1}`"&gt;
            &lt;a-input v-model:value="item.name" placeholder="请输入项目名称" /&gt;
          &lt;/a-form-item&gt;
        &lt;/a-col&gt;
        &lt;a-col :span="2"&gt;
          &lt;a-form-item label=" "&gt;
            &lt;a-button type="text" danger @click="removeItem(index)"&gt;
              删除
            &lt;/a-button&gt;
          &lt;/a-form-item&gt;
        &lt;/a-col&gt;
      &lt;/a-row&gt;
    &lt;/div&gt;
    &lt;a-button type="dashed" @click="addItem"&gt;添加项目&lt;/a-button&gt;
  &lt;/a-form&gt;
&lt;/template&gt;</code></pre>
        </a-collapse-panel>

        <a-collapse-panel key="2" header="步骤表单">
          <pre class="code-block"><code>&lt;template&gt;
  &lt;a-steps :current="current"&gt;
    &lt;a-step title="基本信息" /&gt;
    &lt;a-step title="详细信息" /&gt;
    &lt;a-step title="确认提交" /&gt;
  &lt;/a-steps&gt;

  &lt;div class="step-content"&gt;
    &lt;div v-if="current === 0"&gt;
      &lt;!-- 第一步表单 --&gt;
    &lt;/div&gt;
    &lt;div v-if="current === 1"&gt;
      &lt;!-- 第二步表单 --&gt;
    &lt;/div&gt;
    &lt;div v-if="current === 2"&gt;
      &lt;!-- 确认信息 --&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="step-actions"&gt;
    &lt;a-button v-if="current &gt; 0" @click="current--"&gt;上一步&lt;/a-button&gt;
    &lt;a-button v-if="current &lt; 2" type="primary" @click="current++"&gt;下一步&lt;/a-button&gt;
    &lt;a-button v-if="current === 2" type="primary" @click="submit"&gt;提交&lt;/a-button&gt;
  &lt;/div&gt;
&lt;/template&gt;</code></pre>
        </a-collapse-panel>
      </a-collapse>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, h } from 'vue'
import { message } from 'ant-design-vue'
import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons-vue'
import type { Dayjs } from 'dayjs'

// 动态表单数据
const dynamicForm = ref({
  contacts: [
    { key: 1, name: '', phone: '', relation: undefined }
  ]
})

let contactKey = 1

// 添加联系人
const addContact = () => {
  contactKey++
  dynamicForm.value.contacts.push({
    key: contactKey,
    name: '',
    phone: '',
    relation: undefined
  })
}

// 删除联系人
const removeContact = (index: number) => {
  if (dynamicForm.value.contacts.length > 1) {
    dynamicForm.value.contacts.splice(index, 1)
  }
}

// 步骤表单数据
const stepForm = ref({
  current: 0,
  data: {
    companyName: '',
    companyType: undefined,
    address: '',
    employeeCount: undefined,
    foundedDate: undefined as Dayjs | undefined,
    businessDescription: ''
  }
})

// 获取公司类型文本
const getCompanyTypeText = (type: string | undefined) => {
  const typeMap = {
    startup: '初创公司',
    enterprise: '大型企业',
    government: '政府机构'
  }
  return type ? typeMap[type as keyof typeof typeMap] : '-'
}

// 处理步骤表单提交
const handleStepSubmit = () => {
  message.success('表单提交成功！')
  console.log('提交的数据:', stepForm.value.data)
}
</script>

<style scoped>
.advanced-form-demo {
  max-width: 1200px;
  margin: 0 auto;
}

.example-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.example-section:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  color: #262626;
  margin: 0 0 8px 0;
}

.section-description {
  font-size: 14px;
  color: #8c8c8c;
  margin: 0 0 24px 0;
  line-height: 1.6;
}

.demo-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.demo-wrapper {
  padding: 24px;
  background: #fafafa;
  border: 1px dashed #d9d9d9;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.demo-wrapper:hover {
  border-color: #1890ff;
  background: #f0f8ff;
}

.demo-form {
  max-width: 100%;
}

.result-display {
  padding: 16px;
  background: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.result-label {
  font-size: 14px;
  font-weight: 500;
  color: #262626;
  min-width: 100px;
}

.result-value {
  flex: 1;
  font-size: 12px;
  color: #595959;
}

.result-value pre {
  margin: 0;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  background: none;
  border: none;
  padding: 0;
  white-space: pre-wrap;
  word-break: break-all;
}

/* 动态表单样式 */
.form-section {
  margin-bottom: 24px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e8e8e8;
}

.section-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #262626;
}

.dynamic-item {
  margin-bottom: 16px;
  padding: 16px;
  background: white;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
}

/* 步骤表单样式 */
.step-form-steps {
  margin-bottom: 32px;
}

.step-content {
  min-height: 300px;
  margin-bottom: 24px;
}

.step-form {
  padding: 24px;
  background: white;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
}

.step-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.confirm-content h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #262626;
}

/* 代码示例 */
.code-block {
  background: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  padding: 16px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  line-height: 1.45;
  overflow-x: auto;
  margin: 0;
}

.code-block code {
  background: none;
  padding: 0;
  font-size: inherit;
  color: #24292e;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .example-section {
    padding: 20px;
    margin-bottom: 16px;
  }

  .section-title {
    font-size: 18px;
  }

  .demo-container {
    gap: 16px;
  }

  .demo-wrapper {
    padding: 20px;
  }

  .result-display {
    flex-direction: column;
    gap: 8px;
  }

  .result-label {
    min-width: auto;
  }

  .section-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .step-actions {
    flex-direction: column;
  }
}
</style>